<template>
	
	<view class="page">
		<view style="position: absolute;z-index: 999;width: 100%;">
			<view :style="{height:statusHeight+'px'}"></view>
			<view class="head" style="display: flex;justify-content: center;align-items: center;height: 44px;padding: 5px;">
				<view style="width: 44px;margin-left: 16rpx;position: absolute;left: 16rpx;" @click="toBack()">
					<u-icon name="arrow-left" size="22" color="#fff"></u-icon>
				</view>
				<view style="font-size: 36rpx;color: #fff;">{{audio.title}}</view>
			</view>
		</view>
		<view :style="{height:statusHeight+'px'}"></view>
		<view style="height: 44px;"></view>
		<image style="position: absolute;top: 0;" class="bjImg" :src="audio.icon_url"></image>

		<view>
			<view style="height: 400rpx;display: flex;">
				<view class="titleBox">
					<view class="title-wrap">
						<view class="title-text">{{audio.title}}</view>
						<view style="display: flex;margin: 30rpx;">
							<view style="padding: 5px;background-color: #326EFF;color: #fff;margin-right: 10px;font-size: 10px;border-radius: 4px;" v-for="(item,index) in meditation.keywords" :key="index">
								{{item}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="main">
				<view class="sub-title" style="display: flex;">
					<view>
						<view>简</view>
						<view style="height: 4px;border-radius: 2px;background-color: #1D6EFA;position: relative;top: -5px;"></view>
					</view>
					<view >
						<view>介</view>
					</view>
				</view>
				<view class="timeBox">
					<!-- <view>时长</view> -->
					<image style="width: 40rpx;height: 40rpx;" src="../../static/images/time_ico.png"></image>
					<view>{{parseInt(meditation.audio_duration/60)}}分钟</view>
				</view>
				<view class="intor">
					{{audio.intro}}
				</view>
				<view v-show="meditation.advices" class="sub-title" style="display: flex;">
					<view>
						<view>学习</view>
						<view style="height: 4px;border-radius: 2px;background-color: #1D6EFA;position: relative;top: -5px;"></view>
					</view>
					<view >
						<view>建议</view>
					</view>
				</view>
				<view
					style="display: flex;align-items: center;justify-content: space-between;text-align: center;flex-wrap: wrap;">
					<view v-for="(item,index) in meditation.advices" :key="index" style="background-color: #dfdfdf;border-radius: 10px;padding: 10px;margin-bottom: 15px;width: 295rpx;">
						<view style="display: flex;align-items: center;text-align: center;flex-direction: row;color: #333333;">
							<image style="width: 50rpx;height: 50rpx;" :src="item.icon_url" ></image> <view style="margin-left: 14rpx;">{{item.name}}</view>
						</view>
						<view style="color: #aaaaaa;text-align: left;margin-top: 6rpx;">{{item.describe}}</view>
					</view>
				</view>
				<view style="height: 160rpx;"></view>
		</view>
			<view style="position: absolute;bottom: 70rpx;width: 750rpx;margin: 0 auto;display: flex;justify-content: center;z-index: 999;">
				<view style="width: 710rpx;">
					<u-button @click="navigateTo('/pagesA/pages/audio/audio-play?id='+audio.audio_id)" type="primary" text="马上参与"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState(['member']),
		},
		data() {
			return {
				statusHeight:20,
				meditation:{},
				audio: {
					icon_url: "",
					title: "",
					audio_duration: 0,
					intro: "",
					audio_id: '',
				}
			};
		},
		onLoad() {
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('datas', (data) => {
				// console.log(JSON.stringify(data));
				
				this.audio = data;
				uni.setNavigationBarTitle({
					title:data.title
				})
				if(data.location){
					this.meditation = data;
				}else{
					this.getDetail();
				}
			})
			// let data  = {"audio_duration":420,"audio_id":240,"audio_type_id":5,"icon_url":"https://res.psy-1.com/music/cover/%E5%91%BC%E5%90%B8%E4%B9%8B%E9%97%B4_uaV12QHDppMrhwPH.jpg","intro":"从此刻起，抛开你所有的烦恼与杂念，和我一起用呼吸感受世界。","title":"呼吸之间"};
			// this.audio = data;
			// uni.setNavigationBarTitle({
			// 	title:data.title
			// })
			// if(data.location){
			// 	this.meditation = data;
			// }else{
			// 	this.getDetail();
			// }
			this.statusHeight = uni.getSystemInfoSync().statusBarHeight;
		},
		methods:{
			toBack(){
				uni.navigateBack()
			},
			navigateTo(url){
				// if(!this.$store.state.member.imei){
				// 	this.$toast('请先绑定设备！')
				// 	return setTimeout(()=>{
				// 		uni.navigateTo({
				// 			url:'/pagesA/pages/equipment/bind',
				// 		})
				// 	},1200)
					
				// }
				if (!this.member.phone) {
					uni.navigateTo({
						url: '/pagesA/pages/login/login'
					})
				}
				
				if(this.audio.freedom){
					uni.getBackgroundAudioManager().stop();
					return uni.navigateTo({
						url:'/pagesA/pages/audio/freedomtrain',
					})
				}
				uni.navigateTo({
					url:url,
					success: (res) => {
						res.eventChannel.emit('datas', this.audio)
					}
				})
			},
			getDetail(){
				let data = {
					audio_id: parseInt(this.audio.audio_id)
				}
				uni.$u.http.post('/client/serviceResource',{
					"data":JSON.stringify(data),
					"method":"heartide.bixin.audio.details"
				},{
					 header: {
						 appId:'bixin_openApi_v1',
						 appKey:'KlaWySuV_j1JcLa-X3UI'
					 }
				}).then(res => {
					if (res.code == '0') {
						let reslist = JSON.parse(res.data)
						this.meditation = reslist
						// this.trainName = reslist.title;
					}
				}).catch(e => {
					this.$toast('网络错误！')
				})
			}
		}
	}
</script>

<style lang="scss">
	.bjImg {
		width: 750rpx;
		height: 750rpx;
		position: absolute;
	}

	.titleBox {
		width: 750rpx;
		// height: 750rpx;
		display: flex;
		align-items: center;
		position: relative;
		z-index: 11;
	}

	.title-wrap {}

	.title-text {
		background-color: rgba(0, 0, 0, 0.1);
		margin: 30rpx;
		font-size: 50rpx;
		color: #fff;
	}

	.main {
		border-radius: 30rpx 30rpx 30rpx 0;
		background-color: #fff;
		min-height: 1000rpx;
		position: absolute;
		bottom: 0;
		padding: 30rpx;
		z-index: 30;
	}

	.sub-title {
		font-size: 50rpx;
		color: #000;
		margin: 20rpx 10rpx;
		font-weight: 600;
	}

	.timeBox {
		padding: 20rpx;
		background: #f5f0f0;
		margin: 30rpx 0;
		display: flex;
		justify-content: space-between;
	}
	.intor{
		color: #AAAAAA;
		font-size: 28rpx;
		padding: 10rpx;
	}
</style>